<!--
 * @Author: lijilong
 * @Date: 2024-06-14 12:20:51
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-07-24 14:45:23
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<route lang="json5">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '实验方案详情',
	enablePullDownRefresh: true,
	navigationStyle: 'custom',
	},
	}
</route>

<template>
	<page-meta :root-font-size="setting.rootFontSize"></page-meta>
	<view style="background-color: #e3e3e3">
		<view style="position: sticky; top: 0; z-index: 9999">
			<wd-navbar title="实验方案评审" :bordered="false" safeAreaInsetTop>
				<template #left>
					<wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
				</template>
			</wd-navbar>
		</view>
		<th-card title="任务单信息">
			<th-form>
				<th-form-item label="任务编码">
					<text class="text">{{ form.itemCode }}</text>
				</th-form-item>
				<!-- <th-form-item label="任务名称">
					<text class="text">{{ form.itemName }}</text>
				</th-form-item> -->
				<th-form-item label="合成路径">
					<text class="text">{{ technologyName }}</text>
				</th-form-item>
				<th-form-item label="产品名称">
					<text class="text">{{ form.invName }}</text>
				</th-form-item>
				<th-form-item label="产品规格">
					<text class="text">{{ form.invStd }}</text>
				</th-form-item>
				<th-form-item label="任务负责人">
					<view>
						<text class="text" v-for="(item, index) in form.projectHeadName" :key="index">
							{{ index > 0 ? '，' : '' }}{{ item.userName }}
						</text>
					</view>
					<!-- <text class="text">{{ form.projectHeadName }}</text> -->
				</th-form-item>

				<th-form-item label="任务成员">
					<view>
						<text class="text" v-for="(item, index) in form.rdProjectUserEntity" :key="index">
							{{ index > 0 ? '，' : '' }}{{ item.userName }}
						</text>
					</view>

				</th-form-item>
				<th-form-item label="需求描述">
					<text class="text">{{ form.description }}</text>
				</th-form-item>
				<th-form-item label="反应方程式">
					<text class="text">
						<image class="craft-row-img" :src="form.equation" mode="scaleToFill"
							@click="previewFileHandle(form.equation)" />
					</text>
				</th-form-item>
				<th-form-item label="研发方案">
					<wd-textarea :no-border="true" auto-height v-model="form.rdPlan" disabled placeholder=" "
						style="width: 100%" class="diabledStyle"></wd-textarea>
				</th-form-item>

			</th-form>
		</th-card>

		<th-card title="需求指标" v-if="form.rdDemandStandardEntity && form.rdDemandStandardEntity.length">
			<view class="table-container">
				<table class="analysis-table">
					<tbody>
						<tr>
							<th>检验指标名称</th>
							<th>U8指标</th>
							<th>客户指标</th>
						</tr>
						<tr align="center" v-for="(  item, index  ) in form.rdDemandStandardEntity" :key="index">
							<td>{{ item.standardName }}</td>
							<td>{{ item.standardValue }}</td>
							<td>{{ item.standardValuePm }}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</th-card>
		<th-card title="方案信息">
			<th-form>
				<th-form-item label="实验目的">
					<text class="text" v-text="form.purpose"></text>
				</th-form-item>
			</th-form>
			<view>
				<view class="viewLabel"><text>反应装置</text></view>
				<view class="table-container">
					<table class="analysis-table">
						<tbody>
							<tr>
								<th>反应装置</th>
								<th>用料规格</th>
								<th>最大搅拌量</th>
								<th>最小搅拌量</th>
								<th>单位</th>
							</tr>
							<tr align="center" v-for="(  item, index  ) in form.deviceList" :key="index">
								<td>{{ item.name }}</td>
								<td>{{ item.capacity }}</td>
								<td>{{ item.maxValue }}</td>
								<td>{{ item.minValue }}</td>
								<td>{{ item.unit }}</td>
							</tr>
						</tbody>
					</table>
				</view>
			</view>
		</th-card>
		<th-card title="用料及配比">
			<view class="table-container">
				<table class="analysis-table">
					<tbody>
						<tr>
							<th style="width: 320rpx; min-width: 9.5rem">用料名称</th>
							<th style="width: 280rpx; min-width: 280rpx">用料规格</th>
							<th style="width: 280rpx; min-width: 280rpx">密度</th>
							<th style="width: 280rpx; min-width: 280rpx">占比</th>
							<th style="width: 280rpx; min-width: 280rpx">范围</th>
							<th style="width: 280rpx; min-width: 280rpx">计划用量</th>
							<th style="width: 320rpx; min-width: 9.5rem">单位</th>
						</tr>
						<tr align="center" v-for="(  item, index  ) in materialList" :key="index">
							<td>{{ item.invName }}</td>
							<td>{{ item.invStd }}</td>
							<td>{{ item.density }}</td>
							<td v-if="item.proportion">{{ item.proportion + '%' }}</td>
							<td v-else>{{ item.proportion }}</td>
							<td>
								<text>{{ minPlanDosage(item.density, item.proportion, form.deviceList &&
									form.deviceList[0].minValue) }}</text>
								~
								<text>{{ maxPlanDosage(item.density, item.proportion, form.deviceList &&
									form.deviceList[0].maxValue) }}</text>
							</td>
							<td>{{ item.planDosage }}</td>
							<td>{{ item.unit }}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</th-card>
		<th-card title="实验步骤">
			<ExperimnetStepPreview :materialList="form.processList" mode="scheme" />
			<!-- <wd-img :src="form.processUrl" @click="preview(form.processUrl)" v-if="form.processUrl" width="98vw"
				height="50vh" mode="widthFix" />
			<text class="text" v-else>暂无数据</text> -->
		</th-card>
		<th-card title="方案评审">
			<th-form>
				<th-form-item label="评审结果">
					<text>{{ form.rdFlag == 1 ? '通过' : '不通过' }}</text>
					<!-- <wd-radio-group v-model="form.rdFlag" inline disabled>
						<wd-radio :value="0">不通过</wd-radio>
						<wd-radio :value="1">通过</wd-radio>
					</wd-radio-group> -->
				</th-form-item>
				<th-form-item label="评审结论">
					<wd-textarea type="textarea" auto-height v-model="form.reviewResult" disabled placeholder="评审结论"
						clearable style="width: 100%" class="diabledStyle"></wd-textarea>
				</th-form-item>
			</th-form>
		</th-card>
		<th-card title="评审人员签字">
			<th-form>
				<th-form-item v-for="item in form.userList" :label="item.documentsPostName">
					<wd-img :width="200" :height="100" :src="item.userUrl" @click="preview(item.userUrl)" />
				</th-form-item>
			</th-form>
		</th-card>

		<view class="flow-btn-fixed" v-if="form.status != 2">
			<view class="btn_group" style="width: 100%">
				<view class="btn primary" @click="handleSave">保存</view>
			</view>
		</view>

		<!-- v-if="showSign" -->
		<view v-if="showSign" class="sign-main bg-white" @click="sign">签字</view>

		<wd-action-sheet v-model="showAction" title="" @close="closeSign" @click-modal="closeSign">
			<view class="sign-main-show">
				<text class="sign-main-show-title">签字</text>
				<view class="sign-main-show-line">
					<!-- <wd-img :width="200" :height="100" :src="signature" @click="preview(signature)" /> -->
					<wd-img :width="200" :height="100" :src="signature" @click="signThis" />
				</view>
				<!-- <view class="sign-main-show-btn" @click="signThis">使用该签字</view> -->
				<view class="sign-main-show-btn" @click="signReset">重新签字</view>
			</view>
		</wd-action-sheet>
	</view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getPersonByPersonCode, uploadSignature } from '@/service/pm-task';
import { getObj, updateByIdEvery, putObj, queryCraft } from '@/service/pm-experiment';
import { useUserStore } from '@/stores/user';
import { getObj as getProjectObj } from '@/service/pm-task';
import { maxPlanDosage, minPlanDosage } from '../utils/index'
import ExperimnetStepPreview from '../components/ExperimnetStepPreview.vue'
const setting = useSetting();
const userStore = useUserStore();
const showSign = ref(false);
const signature = ref('');
const userInfo = ref({});
const isChiefEngineer = ref('');
const isDeputyChiefEngineer = ref('');
const showAction = ref(false);

// 提交表单数据
const form = reactive({
	id: null,
	technologyId: null,
	deviceList: [],
	processList: []
});

// 用料配比
const materialList = ref([])

const technologyName = ref('')

/**
 * 工艺路线列表
 */
const craftList = ref([]);

watch(
	() => craftList.value,
	(val) => {
		const technology = val && val.find(item => item.id == form.technologyId)
		technologyName.value = technology ? technology.craftName : '';
	},
	{
		immediate: true,
		deep: true,
	}
)
const userInfos = userStore.userInfos;
const cusPerson = userInfos.user.username;
const init = (params) => {
	uni.$off('pm-requirement-sign');
	uni.showLoading();
	getObj(params)
		.then((res) => {
			console.log('res', res);
			res.data.deviceList = res.data.equipmentList || [];
			Object.assign(form, res.data);
			materialList.value =
				res.data.dosageList &&
				res.data.dosageList.map((item) => {
					item.planDosage = item.dosage || '';
					return item;
				});

			form.processList = res.data.processList || []
			if (res.data.taskCode && res.data.demandCode) {
				getProjectInfo({ id: form.taskId, taskCode: form.taskCode, demandCode: form.demandCode });
			}
			const user = res.data.userList.find(item => item.userCode == cusPerson)
			showSign.value = user ? true : false;
		})
		.finally(() => {
			uni.stopPullDownRefresh();
			uni.hideLoading();
		});
	// checkPost();
};

const getProjectInfo = function (params) {
	getProjectObj(params).then((res) => {
		if (res.code === 0) {
			form.projectHeadName = res.data.rdProjectUserEntity.filter(item => item.userType == 2) || [];
			// form.technologyHeadName = res.data.rdProjectUserEntity.filter(item => item.userType == 2) || [];
			form.rdProjectUserEntity = res.data.rdProjectUserEntity.filter(item => item.userType == 0) || [];
			form.rdDemandStandardEntity = res.data.rdDemandStandardEntity || [];


			getCraft(res.data.id)
			// craftList.value = res.data.rdCraftEntity.filter((item) => item.isUse) || [];
			// form.projectHeadName = res.data.projectHeadName;
			// form.technologyHead = res.data.technologyHead;
			// form.technologyHeadName = res.data.technologyHeadName;
			// form.rdProjectUserEntity = res.data.rdProjectUserEntity;

			// checkPost();
		}
	});
};

const getCraft = (taskId) => {
	queryCraft(taskId).then(res => {
		craftList.value = res.data.filter((item) => item.isUse && !item.delFlag) || [];
	})
}


onLoad((options) => {
	const params = JSON.parse(options.params);
	const id = params.id;
	init({
		id: id,
	});
});

const checkPost = () => {
	// 获取用户的岗位 和签字
	// getPersonByPersonCode
	const userInfos = userStore.userInfos;
	const cusPerson = userInfos.user.username;
	console.log(userInfos.user)
	getPersonByPersonCode({
		personCode: cusPerson,
	}).then((res) => {
		if (!res.data) return;
		const sign = res.data.signature;
		signature.value = sign;
		const hrPersonDeptList = res.data.hrPersonDeptList;
		const postNameList = hrPersonDeptList.map((item) => item.postName); // 岗位列表
		// 判断是否有总工 、 副总工
		const _isChiefEngineer = postNameList.find(
			(item) => item && item.indexOf('副总工') < 0 && item.indexOf('总工') >= 0,
		);
		const _isDeputyChiefEngineer = postNameList.find((item) => item && item.indexOf('副总工') >= 0);

		isChiefEngineer.value = _isChiefEngineer;
		isDeputyChiefEngineer.value = _isDeputyChiefEngineer;

		if (_isChiefEngineer || _isDeputyChiefEngineer) {
			showSign.value = true;
		} else {
			showSign.value = false;
		}
		userInfo.value = res.data;
	});
};

const sign = () => {
	// uni.navigateTo({
	//   url: '/pages/pm/requirement/sign',
	// });

	// 判断签字
	const userInfos = userStore.userInfos;
	const cusPerson = userInfos.user.username;
	getPersonByPersonCode({
		personCode: cusPerson,
	}).then((res) => {
		const sign = res.data.signature;
		signature.value = sign;
		if (sign) {
			showAction.value = true;
		} else {
			signReset();
			// uni.navigateTo({
			//   url: '/pages/pm/requirement/autograph',
			// });
		}
	});

	// uni.navigateTo({
	//   url: '/pages/pm/requirement/autograph',
	// });
};

onPullDownRefresh(() => {
	init({
		id: form.id,
		taskCode: form.taskCode,
		demandCode: form.demandCode,
	});
});

const goBack = () => {
	uni.navigateBack();
};

const preview = (url) => {
	if (!url) return;
	uni.previewImage({
		urls: [url],
	});
};

const closeSign = () => {
	showAction.value = false;
	uni.$off('pm-requirement-sign');
};

const signHanle = (sign) => {
	const userInfos: any = userInfo.value;
	// 判断岗位
	//   const _isChiefEngineer = isChiefEngineer.value;
	//   const _isDeputyChiefEngineer = isDeputyChiefEngineer.value;
	const params = {
		id: form.id,
		signName: userInfos.personName,
		signUrl: sign,
	};
	//   if (!_isChiefEngineer && !_isDeputyChiefEngineer && !_isLaboratoryLeader) {
	//     uni.showToast({
	//       title: '只有总工和副总工和技术负责人才能签字',
	//       icon: 'none',
	//     });
	//     return;
	//   }

	//   if (_isChiefEngineer) {
	//     // params['chiefEngineer'] = userInfos.id;

	//   } else if (_isDeputyChiefEngineer) {
	//     params['deputyChiefEngineer'] = userInfos.personCode;
	//     params['signName'] = userInfos.personName;
	//     params['deputyChiefEngineerPost'] = _isDeputyChiefEngineer;
	//     params['signUrl'] = sign;
	//   } else if (_isLaboratoryLeader) {
	//     params['laboratoryLeader'] = userInfos.personCode;
	//     params['signName'] = userInfos.personName;
	//     params['laboratoryLeaderPost'] = _isLaboratoryLeader;
	//     params['signUrl'] = sign;
	//   }
	updateByIdEvery(params)
		.then((res) => {
			uni.showToast({
				title: '签字成功',
			});

			// setTimeout(() => {
			//   uni.navigateBack();
			// }, 500);

			// 更新签字
			if (!signature.value) {
				uploadSignature({
					id: userInfos.id,
					signature: sign,
				});
			}
			showAction.value = false;
			// 刷新页面
			init({
				id: form.id,
			});
		})
		.finally(() => {
			// uni.$off('pm-requirement-sign');
		});
};

const handleSave = async function () {
	uni.showLoading({
		mask: true,
	});
	try {
		const res = await putObj(form);
		if (res.code === 0) {
			uni.showToast({
				mask: true,
				title: `保存成功`,
				icon: 'none',
			});

			init({
				id: form.id,
			});
		}
	} catch (err) {
		uni.hideLoading();
	}
};

const signThis = () => {
	const sign = signature.value;
	signHanle(sign);
};

const signReset = () => {
	uni.$on('pm-requirement-sign', (e) => {
		console.log('sign', e);
		signHanle(e);
	});
	uni.navigateTo({
		url: '/pages/pm/requirement/autograph',
	});
};

const previewImg = (url) => {
	if (!url) return;
	uni.previewImage({
		urls: [url],
	});
};

const previewFileHandle = (file) => {
	uni.navigateTo({
		url: '/pages/pm/preview-online?url=' + file,
	});
};

const previewWeb = (url) => {
	uni.navigateTo({
		url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
	});
};
</script>

<style lang="scss" scoped>
@import "../components/table.scss";

.block .content {
	padding: 0 !important;
}

.card-detail {
	padding: 0 !important;
}

.wd-cell {
	padding-left: 0 !important;
}

.wd-card__title {
	border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0 30rpx;

	.pm-title {
		box-sizing: border-box;
		padding-left: 20rpx;
		margin: 40rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		border-left: 8rpx solid #2e5cf6;
		border-radius: 4rpx;
	}

	.pm-row {
		display: flex;
		min-height: 60rpx;
		border-bottom: 1px solid #f6f0f0;

		.pm-label {
			display: flex;
			align-items: center;
			width: 20%;
			font-size: 26rpx;
			color: #979494;
		}

		.pm-value {
			display: flex;
			flex: 1;
			align-items: center;
			font-size: 26rpx;
			color: #333;
		}
	}
}

.sign-main {
	// display: flex;
	// align-items: center;
	// justify-content: center;
	// width: 100%;
	// margin: 20rpx 0;
	position: fixed;
	right: 0rpx;
	bottom: 40rpx;
	width: 160rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: white;
	text-align: center;
	background-color: rgb(77 128 240);

	// border-radius: 50%;
	border-top-left-radius: 40rpx;
	border-bottom-left-radius: 40rpx;
}

:deep(.label) {
	width: 160rpx !important;
}

.viewTable {
	flex: auto;

	:deep() {
		.content {
			width: calc(100% - 80px);
		}
	}
}

.diabledStyle {
	:deep() {
		.wd-textarea__inner {
			color: #262626 !important;
		}
	}
}

.result-tag {
	padding: 6rpx 14rpx;
	margin: 2rpx 0;
	font-size: 24rpx;
	color: white;
	background-color: #87d068;
	border-radius: 4rpx;
}

.sign-main-show {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.sign-main-show-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #818181;
		border-bottom: 1px solid #e3e3e3;
	}

	.sign-main-show-line {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border: 4rpx solid #d0dbff;
		border-radius: 10rpx;
	}

	.sign-main-show-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		border-top: 1px solid #e3e3e3;
	}
}

.info-list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.info-list-main {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10rpx;
	margin: 10rpx 0;
	border: 1px solid #e3e3e3;
	border-radius: 8rpx;

	.info-list-row {
		display: flex;
		width: 100%;

		.info-list-label {
			width: 150rpx;
			font-size: 28rpx;
			color: #808080;
		}

		.info-list-value {
			flex: 1;
			width: 0;
		}
	}
}

.viewLabel {
    position: relative;
    flex: 1;
    min-width: 16.875rem;
    padding: 0.5625rem 0;
    margin: 0 0.75rem;
    flex-shrink: 0;
    width: 3.75rem;
    font-size: 0.8125rem;
    line-height: 1;
    color: #666;
}

.craft-row-img {
	height: 80rpx;
	width: 80rpx;
}

.flow-btn-fixed {
	width: 100%;
	background-color: white;
}

.btn_group {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f7f7f7;

	.btn {
		display: flex;

		// width: 49%;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 40px;
		color: black;
		background-color: white !important;
		border-left: 1px solid #f7f7f7;
		border-radius: 0 !important;

		// color: white;
		border-radius: 6rpx;
	}

	.danger {
		background-color: #f56c6c;
	}

	.primary {
		background-color: #409eff;
	}
}
</style>